<template>
  <div class="result-display">
    <div class="top-title border-bottom">
      <span class="i-wrapper" @click="back">
        <i class="iconfont icon-arrow-left"></i>
      </span>
      <span class="search-box-wrapper">
        <search-box ref="searchBox" @ifocus.stop="ifocus"></search-box>
      </span>
      <span class="dosearch-wrapper">&nbsp;</span>
    </div>
    <div class="div-nothing" v-show="!searchResultList.length">
      <span>没有搜索结果</span>
    </div>
    <article-list :articles="searchResultList" @selectItem="selectArticle" :showLabelTitle="showLabelTitle" v-show="searchResultList.length > 0"></article-list>
    <div class="fullscreen-loading-wrapper" v-show="loadingFlag">
      <div class="fullscreen-loading-inner">
        <div class="fs-loading">
          <fullscreen-loading></fullscreen-loading>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { mapActions, mapGetters } from 'vuex'
import SearchBox from 'base/search-box/search-box'
import ArticleList from 'components/article-list/article-list'
import { getSearchResultDetail } from 'api/searchApi'
import FullscreenLoading from 'base/fullscreen-loading/fullscreen-loading'
import { routeGoodsDetailMixn } from 'common/js/mixin'

export default {
  name: 'search-result-display',
  mixins: [ routeGoodsDetailMixn ],
  components: {
    SearchBox,
    ArticleList,
    FullscreenLoading
  },
  data () {
    return {
      searchResultList: [],
      loadingFlag: false,
      showLabelTitle: false
    }
  },
  computed: {
    ...mapGetters({
      searchString: 'searchString'
    })
  },
  methods: {
    loadSearchResultDetail () {
      this.loadingFlag = true
      getSearchResultDetail(this.searchString).then((resp) => {
        if (resp.message === 1) {
          this.searchResultList = resp.data
          this.loadingFlag = false
        }
      }).catch((e) => {
        this.loadingFlag = false
        console.log('search-result-display getSearchResultDetail occur error')
        console.log(e)
      })
    },
    ifocus () {
      this.$store.commit('SET_SEARCH_VIEW_STATE', true)
    },
    selectArticle (article) {
      console.log('searchResultDisplay selectArticle')
      console.log(article)
      this.routeToGoodsDetailPage(article)
    },
    back () {
      this.$router.back()
    },
    ...mapActions({
      hiddenTabsAndSearchTitle: 'hiddenTabsAndSearchTitle'
    })
  },
  activated () {
    this.hiddenTabsAndSearchTitle()
    console.log('search-result-display activated')
    this.$refs.searchBox.setQuery(this.searchString)
    window.scrollTo(0, 0)
  },
  created () {
    console.log('search-result-display created')
    if (!this.searchString) this.$router.push({ name: 'homePage' })
    this.loadSearchResultDetail()
  },
  watch: {
    searchString (newVal, oldVal) {
      this.$refs.searchBox.setQuery(this.searchString)
      console.log('search-result-display watch searchString', newVal, '-', oldVal)
      if (newVal === oldVal) return
      this.loadSearchResultDetail()
    }
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.result-display
  padding-top: 41px
  .top-title
    position: fixed
    left: 0
    top: 0
    right: 0
    display: flex
    line-height: 40px
    background: #fff
    z-index: 2
    .i-wrapper
      flex: 0 0 40px
      padding-left: 10px
      .icon-arrow-left
        font-size: 18px
    .search-box-wrapper
      flex: 1
      margin: auto auto
    .dosearch-wrapper
      flex: 0 0 10px
      text-align: center
  .fullscreen-loading-wrapper
    z-index: 11
    position: fixed
    left: 0
    top: 0
    right: 0
    bottom: 0
    background: #FFFFFE
    .fullscreen-loading-inner
      position: relative
      width: 100%
      height: 100%
      .fs-loading
        position: absolute
        width: 100%
        top: 50%
        text-align: center
        transform: translateY(-50%)
  .div-nothing
    padding-top: 20px
    text-align: center
    font-size: 12px
    color: black
</style>
